<template>
  <div class="addbed">
    <el-dialog title="添加床位" :visible="dialogVisible" center>
      <el-form :model="formBed">
        <el-form-item label="开始床号:">
          <el-input-number
            v-model="formBed.startBedNumber"
            :controls="false"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="结束床号:">
          <el-input-number
            v-model="formBed.endBedNumber"
            :controls="false"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="选择科室:">
          <el-select v-model="formBed.departmentId" placeholder="请选择科室">
            <el-option
              v-for="item of departmentlist"
              :key="item.id"
              :label="item.departmentName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span class="tips">若增加一个床位，则开始和结束都输入同一床位号</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="addbeds">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formBed: {
        startBedNumber: "",
        endBedNumber: "",
        departmentId: "",
      },
    };
  },
  mounted() {
    // console.log(this.departmentlist);
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    departmentlist: {
      type: Array,
      required: true,
    },
  },
  methods: {
    closeDialog() {
      this.$parent.openAddbedDialog(false);
    },
    addbeds() {
      if (this.formBed.endBedNumber < this.formBed.startBedNumber) {
        return this.$message.error("结束床位号必须大于开始床位号");
      }
      if (!this.formBed.endBedNumber || !this.formBed.startBedNumber) {
        return this.$message.error("请填写床位号");
      }
      if (!this.formBed.departmentId) {
        return this.$message.error("请选择科室");
      }
      let data = {
        startBedNumber: this.formBed.startBedNumber,
        endBedNumber: this.formBed.endBedNumber,
        departmentId: this.formBed.departmentId,
      };
      this.$api
        .addBedInfo(data)
        .then((res) => {
          this.$parent.openAddbedDialog(false);
          this.$message.success(res.message);
          let data = {
            departmentId: "",
            current: "",
          };
          this.$parent.designatedBed(data);
        })
        .catch((err) => {
          this.$parent.openAddbedDialog(false);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.addbed {
  & >>> .el-dialog {
    max-width: 790px;
    .el-dialog__headerbtn {
      display: none;
    }
    .el-form {
      padding: 0 30px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .el-form-item {
        display: flex;
        align-items: center;
        .el-form-item__label {
          // width: 80px;
          margin: 0;
        }
        .el-form-item__content {
          .el-input {
            max-width: 180px;
          }
        }
      }
    }
    @media screen and (max-width: 1224px) {
      .el-form {
        justify-content: center;
      }
    }
    .tips {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #bbbbbb;
    }
  }
}
</style>